@mixin button {
  border: none;
  padding: 0;
  &:hover {
    cursor: pointer;
  }
  &:focus {
    outline: 0;
  }
}

@mixin simpleButton($type) {
  .#{$type} {
    &[disabled] {
      background: var(--theme-button-#{$type}-background-color-disabled);
      color: var(--theme-button-#{$type}-text-color-disabled);
      opacity: 0.3;
      &:hover,
      &:active {
        background: var(--theme-button-#{$type}-background-color-disabled);
      }
    }

    &:not([disabled]) {
      background: var(--theme-button-#{$type}-background-color);
      color: var(--theme-button-#{$type}-text-color);
      &:hover {
        background: var(--theme-button-#{$type}-background-color-hover);
      }
      &:active {
        background: var(--theme-button-#{$type}-background-color-active);
      }
    }

    &:focus:not(:active):not(:hover) {
      box-shadow: inset 0 0 0 4px var(--theme-button-#{$type}-outline-color);
    }
  }
}
